<template>
	<view>
        <u-navbar :bgColor="color == 'white' ? 'transparent':'#ffffff'" :placeholder="color=='black'">
            <view class="u-nav-slot" slot="left" :class="color">
               <image src="@/static/logo_w.png" mode="heightFix" v-if="color=='white'"></image>
               <image src="@/static/logo_ww.png" mode="heightFix" v-else></image>
			   <u-line direction="column" :color="color=='white'?'#fff':'#000'"  :hairline="false"    length="8"   margin="0 8px"></u-line>
              
			   <image src="@/static/search.png" @click="handleToSearch" mode="heightFix" v-if="color=='white'"></image>
               <image src="@/static/search_w.png" @click="handleToSearch" mode="heightFix" v-else></image>
			   
			   <u-line direction="column" :color="color=='white'?'#fff':'#000'"  :hairline="false"    length="8"   margin="0 8px"></u-line>
               <image src="@/static/notice.png" @click="handleToInfo" mode="heightFix" v-if="color=='white'"></image>
               <image src="@/static/notice_w.png" @click="handleToInfo" mode="heightFix" v-else></image>
            </view>
        </u-navbar>
	</view>
</template>

<script>
	export default{
		props:{
			color:{
				type:String,
				default: 'white',   
			},
		},
		data(){
			return{
				
			}
		},
		methods:{
			handleToSearch(){
				uni.navigateTo({
					url:"/pages/index/search"
				})
			},
			handleToInfo(){
				uni.navigateTo({
					url:"/pages/information/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-nav-slot{
		display: flex;
		align-items: center; 
		height: 60rpx;
		padding: 0 30rpx;
		border-radius: 50rpx;
		image{
			height: 32rpx;
		}
		&.white{
			
			background: rgba(0,0,0,.2);
		}
		&.black{
			border: 1px solid #D5D5D5;
		}
	}
</style>